<template>
      <div class="shbox">
          <div class="type_box">
                <div class="typeconment">
                      <div class="typeconment_top">服务类型</div>
                      <div class="typeconment_bottom">
                          <div class="exchange">申请换货</div>
                          <div class="return">申请换货</div>
                      </div>
                </div>
                <div class="xiangq">
                   <div class="xiangq_top">
                     <div class="xiangq_img">
                           <img src="../assets/z1.png"/>
                     </div>
                     <div class="xiangq_right">
                       <div class="xiangq_title">
                         Samsonite新秀丽 PASO系列  纯
                         PC拉链斜纹拉杆箱  112升（24..
                       </div>
                       <div class="chosen">
                         <span>已选择：太空银</span>
                       </div>
                       <p class="money">￥2200  <span class="num">1件</span> </p>
                     </div>
                   </div>
                   <div class="reason">
                     <span class="why">申请原因</span>
                     <select>
                       <option>请选择</option>
                       <option>无理由退货</option>
                       <option>有理由退货</option>
                       <option>退货</option>
                       <option>想退货</option>
                     </select>
                   </div>
                   <div class="xiangq_bottom">
                     <span class="describe">请描述具体问题，建议您先联系卖家沟通确认</span>
                   </div>
                </div>
                <div class="upload">
                   <div class="upload_top">
                      <span class="went">问题描述</span>
                   </div>
                    <div class="wenbeny">
                   <textarea class="text_box">请您在此描述问题</textarea>
                 </div>
                    <div class="upload_bottom">
                      <div class="upload_img"><img src="../assets/images/ping.png"/></div>
                    </div>
                </div>
                <div class="return_way">
                  <div class="return_waytop">
                     <span class="way">商品退回方式</span>
                  </div>
                  <div class="return_waybottom">
                    <div class="return_left">
                        上门取件
                    </div>
                    <div class="return_right">
                      快递至第三方卖家
                    </div>
                  </div>
                </div>
                <div class="address">
                   <div class="address_top">
                      <div class="address_toplf">
                              收货人
                      </div>
                     <input class="address_toprg" value=" 张三李四"/>


                   </div>
                  <div class="address_top">
                    <div class="address_toplf">
                      手机号码
                    </div>
                    <input class="address_toprg" value=" 13899999996"/>


                  </div>
                  <div class="address_bottom">
                    <div class="address_bottomt">
                      <div class="address_bmlf">
                        收货地址
                      </div>
                      <span class="dizhi">此地址为商品回寄地址</span>
                    </div>

                     <div class="dingw">
                       <textarea class="dtext">北京市海淀区学院南路中科软商务楼中科软科技股份有限公司 </textarea>
                     </div>

                  </div>
                </div>
                <div class="submit_box">
                  <div class="submit_img">
                    <img src="../assets/images/button_s.png"/>
                  </div>
                </div>
          </div>
      </div>
</template>

<script>
    export default {
        name: "after-sales"
    }
</script>

<style scoped>
  .shbox{
    width: 100%;
    min-height:1890px ;
    background: #f4f4f4;
  }
.type_box{
  width: 100%;
  height: 213px;
  padding-top: 20px;
}
  .typeconment{
    width: 100%;
    height: 190px;
    background: #ffffff;
  }
  .typeconment_top{
   width: 100%;
    height: 70px;
    line-height: 70px;
    padding-left: 30px;
    border-bottom: 1px solid #f4f4f4;
    font-size: 28px;
    color:#3b3b43 ;
  }
  .typeconment_bottom{
    width: 100%;
    height: 120px;
  }
  .exchange{
    width: 180px;
    height: 63px;
    border: 1px solid #fe3519 ;
    border-radius:63px;
    line-height: 63px;
    text-align: center;
    font-size: 24px;
    color: #fe3159;
    margin-top: 24px;
    margin-left: 34px;
    float: left;
  }
  .return{
    width: 180px;
    height: 63px;
    border: 1px solid #bdbdbd ;
    border-radius:63px;
    line-height: 63px;
    text-align: center;
    font-size: 24px;
    color: #a1a1a1;
    margin-top: 24px;
    margin-left: 34px;
    float: left;
  }
  .xiangq{
    width: 100%;
    height: 410px;
    background: #ffffff;
    margin-top: 20px;
  }
  .xiangq_top{
    width: 100%;
    height: 195px;
    border-bottom:1px solid #f4f4f4 ;
    padding-top: 30px;
  }
  .xiangq_img{
    width: 23%;
    height: 150px;
    margin-left: 30px;
    float: left;
  }
  .xiangq_img img{
    width: 150px;
    height: 150px;
  }
  .xiangq_right{
    width: 64%;
    height: 150px;
    margin-left: 15px;
    float: left;
  }
  .xiangq_title{
    width: 100%;
    height:70px;
    font-size: 28px;
    color: #3b3b43;

  }
  .chosen{
    color: #d6d6d6;
    font-size: 24px;
    margin-top:15px ;
  }
  .money{
    font-size: 28px;
    color:#3b3b43 ;
  }
  .num{
    margin-left: 20px;
  }
  .reason{
    height: 90px;
    width: 100%;
   line-height: 90px;
    border-bottom: 1px solid #f4f4f4 ;
  }
  .why{
    margin-left: 30px;
    font-size: 28px;
    color:#3b3b43 ;
  }
  select{
    float: right;
    margin-top: 20px;
    margin-right: 30px;
    border: none;
    font-size: 28px;
    height: 50px;
    color:#3b3b43 ;
  }
  .xiangq_bottom{
    width: 100%;
    height: 90px;
    line-height: 90px;
  }
  .describe{
    margin-left: 30px;
    color: #a1a1a1;
    font-size: 24px;
  }
  .upload{
    width: 100%;
    height: 450px;
    background: #ffffff;
    margin-top: 20px;
  }
  .upload_top{
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #f4f4f4 ;
  }
  .went{
    margin-left: 30px;
    font-size: 28px;
    color:#3b3b43 ;
  }
  .wenbeny{
    width: 100%;
    min-height: 180px;
    text-align: center;

  }
  .text_box{
    width: 80%;
    margin: auto;
    min-height: 180px;
    background: #f8f8f8;
    margin-top: 30px;
    color: #a1a1a1;
    border: none;
    padding-left: 20px;
  }
  .upload_img{
    margin-left: 30px;
    margin-top: 20px;
  }
  .upload_img img{
    width: 120px;
    height: 120px;
  }
  .return_way{
    width: 100%;
    height:190px ;
    background: #ffffff;
    margin-top: 20px;
  }
  .return_waytop{
    width: 100%;
    height:70px ;
    border: 1px solid #f4f4f4;
    line-height: 70px;

  }
  .way{
    margin-left: 30px;
    font-size: 28px;
    color:#3b3b43;
  }
  .return_waybottom{
    width: 100%;
    height: 120px;
  }
  .return_left{
    width: 180px;
    height: 63px;
    border: 1px solid #fe3519 ;
    border-radius:63px;
    line-height: 63px;
    text-align: center;
    font-size: 24px;
    color: #fe3159;
    margin-top: 24px;
    margin-left: 34px;
    float: left;
  }
  .return_right{
    width: 250px;
    height: 63px;
    border: 1px solid #bdbdbd ;
    border-radius:63px;
    line-height: 63px;
    text-align: center;
    font-size: 24px;
    color: #a1a1a1;
    margin-top: 24px;
    margin-left: 34px;
    float: left;
  }
  .address{
    width: 100%;
    height: 380px;
    margin-top: 30px;
    background: #ffffff;
  }
  .address_top{
    width: 100%;
    height: 90px;
    line-height: 90px;
    border-bottom: 1px solid #f4f4f4;
  }
  .address_toplf{
    width: 150px;
    margin-left: 30px;
    color: #a1a1a1;
    font-size: 28px;
    height: 90px;
    float: left;
  }
  .address_toprg{
    color:#3b3b43;
    font-size: 28px;
    border: none;
  }
.address_bottom{
  width: 100%;
  height: 90px;
  line-height: 90px;
}
.address_bmlf{
  width: 150px;
  margin-left: 30px;
  color: #a1a1a1;
  font-size: 28px;
  height: 90px;
  float: left;
}
  .address_bottomt{
    width: 100%;
    height: 90px;
  }
  .dizhi{
    font-size: 20px;
    color: #a1a1a1;
  }
  .dingw{
    width: 100%;
  }
   .dtext{
    width: 90%;
    margin-left: 30px;
    font-size: 28px;
     border: none;
  }

  .submit_img img{
    width: 472px;
    height: 77px;
  }
  .submit_box{
    width: 100%;
    text-align: center;
  }
  .submit_img{
    width: 100%;
    height: 77px;
    margin-top: 40px;
  }

</style>
